<template>
	<div class="container" ref="refContainer">
		<div class="doc-content">
			<div class="title">
				Dialog对话框
			</div>
			<div class="sub-title quote">
				由于这是一个API组件，应使用API的方式来调用
			</div>
			
			<div class="example-title">引入方式（按需）</div>
			<code-view>
				<template slot="code-js">{{ jsCode1 }}</template>
			</code-view>
			
			<div class="example-title">基本用法</div>
			<code-view>
				<template slot="code-html">{{ htmlCode2 }}</template>
				<template slot="code-js">{{ jsCode2 }}</template>
			</code-view>
			
			<div class="example-title">自定义HTML内容</div>
			<code-view>
				<template slot="code-html">{{ htmlCode3 }}</template>
				<template slot="code-js">{{ jsCode3 }}</template>
			</code-view>
			
			<div class="example-title">HTML包含动态组件</div>
			<div class="example-sub-title quote"> 
				在这个例子里，插入的HTML文本中出现了 <span class="danger">&lt;gr-button&gt;</span> 
				这样的动态组件，同时还给组件设置了 <span class="success">flat</span> 属性 <br>
				当你需要给这种动态渲染组件传参时，变量的定义，需要通过 <span class="danger">dynamicProps</span> 来设置
			</div>
			<code-view>
				<template slot="code-html">{{ htmlCode4 }}</template>
				<template slot="code-js">{{ jsCode4 }}</template>
			</code-view>
			<br>
			
			<div class="example-title">方法列表</div>
			<gr-table :width="800" :tableData="propertiesExplain2" textAlign="left">
				<template v-slot="{rowData}">
					<gr-table-column label="方法名称" width="100">
						{{rowData.attrName}}
					</gr-table-column>
					<gr-table-column label="方法说明" width="150">
						{{rowData.introduce}}
					</gr-table-column>
					<gr-table-column label="参数" width="120">
						#{{rowData.param}}
					</gr-table-column>
				</template>
			</gr-table>
			
			
			<div id="parameter-list" class="example-title">参数列表</div>
			<gr-table :width="800" :tableData="propertiesExplain1" textAlign="left">
				<template v-slot="{rowData}">
					<gr-table-column label="参数名称" width="150">
						{{rowData.attrName}}
					</gr-table-column>
					<gr-table-column label="参数说明" width="190">
						{{rowData.introduce}}
					</gr-table-column>
					<gr-table-column label="类型" width="110">
						{{rowData.type}}
					</gr-table-column>
					<gr-table-column label="可选值" width="100">
						{{rowData.optionValues}}
					</gr-table-column>
					<gr-table-column label="默认值" width="100">
						{{rowData.defaultValue}}
					</gr-table-column>
				</template>
			</gr-table>
		</div>
		<div class="demo-view">
			<div ref="refCellPhone" class="cellphone">
				<iframe src="demo.html#/dialogdemo" frameborder="0" width="100%" height="100%"></iframe>
			</div>
		</div>
	</div>
</template>

<script>
	
	import Demo from '../components/Demo.vue'
	import CodeView from '../components/CodeView.vue'
	export default {
		components: {
			Demo, CodeView
		},
		data() {
			return {
jsCode1: `import {Dialog} from 'gabriel-ui'
Vue.use(Dialog)
//当Dialog组件被引入时，会自动在Vue的原型上添加$dialog对象
//相当于 Vue.prototype.$dialog = $dialog`,
htmlCode2: `<gr-button block @click="open">alert</gr-button>`,
jsCode2: `export default {
	methods: {
		open() {
			this.$dialog.alert({
				title: '这是标题',
				message: '这是内容内容内容内容内容内容',
				confirmButtonText: '好的呢'
			});
		}
	}
}`,
htmlCode3: `<gr-button block @click="open">alert</gr-button>`,
jsCode3: `export default {
	methods: {
		open() {
			this.$dialog.alert({
				message: '<p style="color: #f40"> <b> 自定义html内容 </b> </p>'
			});
		}
	}
}`,
htmlCode4: `<gr-button block @click="open">alert</gr-button>`,
jsCode4: `export default {
	methods: {
		open() {
			this.$dialog.alert({
				message: '<p style="color: #f40"> <b> 自定义html内容 </b> </p>' +
					'<p> <gr-button :flat="flat" color="primary">按钮</gr-button> </p>',
				dynamicProps: {
					flat: true //这里的参数是给动态组件传参用的，没有的话可以不写
				}	
			});
		}
	}
}`,
				propertiesExplain1: [
					{
						attrName: 'title',
						introduce: `弹框的标题`,
						type: 'String',
						optionValues: '----',
						defaultValue: '"标题"'
					},
					{
						attrName: 'message',
						introduce: `弹出框内容`,
						type: 'String',
						optionValues: '----',
						defaultValue: '----'
					},
					{
						attrName: 'showConfirmButton',
						introduce: `是否显示确认按钮`,
						type: 'Boolean',
						optionValues: 'true / false',
						defaultValue: 'true'
					},
					{
						attrName: 'confirmButtonText',
						introduce: `确认按钮文字内容`,
						type: 'String',
						optionValues: '----',
						defaultValue: '"确认"'
					},
					{
						attrName: 'confirmButtonColor',
						introduce: `确认按钮文字颜色`,
						type: 'String',
						optionValues: '----',
						defaultValue: '#2196f3'
					},
					{
						attrName: 'showCancelButton',
						introduce: `是否显示取消按钮, 在confirm方法下默认显示该按钮`,
						type: 'Boolean',
						optionValues: 'true / false',
						defaultValue: 'false'
					},
					{
						attrName: 'cancelButtonText',
						introduce: `取消按钮文字内容`,
						type: 'String',
						optionValues: '----',
						defaultValue: '"取消"'
					},
					{
						attrName: 'cancelButtonColor',
						introduce: `取消按钮文字颜色`,
						type: 'String',
						optionValues: '----',
						defaultValue: '#666'
					},
					{
						attrName: 'closeOnClickOverlay',
						introduce: `点击遮罩层是否关闭弹窗`,
						type: 'Boolean',
						optionValues: 'true / false',
						defaultValue: 'false'
					},
					{
						attrName: 'dynamicProps',
						introduce: `自定义HTML内容中动态组件的参数`,
						type: 'Object',
						optionValues: '----',
						defaultValue: '{ }'
					}
					
				],
				propertiesExplain2: [
					{
						attrName: 'alert',
						introduce: `警告弹出框`,
						param: '详见参数列表'
					},
					{
						attrName: 'confirm',
						introduce: `确认弹出框`,
						param: '详见参数列表'
					}
				]
			}
		},
		mounted() {
			let ele = this.$refs.refCellPhone
			this.$refs.refContainer.addEventListener('scroll', (e)=> {
				ele.style.top = e.target.scrollTop + 'px';
			})
		},
		methods: {
			click(e) {
				this.$toast.show('这是一个吐司提示', 1000)
			}
		}
	}
</script>

<style lang="scss">
	
</style>
